<template>
  <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="88%">
    <el-form>
      <!-- 标题 -->
      <el-form-item label="标题:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formAnnouncement.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <!-- 内容 -->
      <el-form-item label="内容:" style="width:100%;">
        <div class="quill-container">
          <QuillEditor 
            v-model:content="formAnnouncement.content"
            theme="snow" 
            :options="editorOptions"
            contentType="html" 
            style="height: 400px;"
          />
        </div>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="announcement-button" type="primary" plain @click="onSubmit()">保存</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { addAnnouncementService, editAnnouncementService, getAnnouncementDetailService } from '@/apis/announcement'
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// 编辑器配置
const editorOptions = reactive({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['link', 'image', 'video']
    ]
  }
})

const visibleDrawer = ref(false)
const formAnnouncement = reactive({
  announcementId: '',
  title: '',
  content: '',
})

async function open(announcementId) {
  visibleDrawer.value = true
  for (const key in formAnnouncement) {
    if (formAnnouncement.hasOwnProperty(key)) {
      formAnnouncement[key] = '';
    }
  }
  if (announcementId) {
    const announcementDetail = await getAnnouncementDetailService(announcementId)
    Object.assign(formAnnouncement, announcementDetail.data)
  }
}

defineExpose({
  open
})

function validate() {
  let msg = ''
  return msg
}

const emit = defineEmits(['success'])
async function onSubmit() {
  const errorMessage = '';
  // const errorMessage = validate()
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false
  }
  const fd = new FormData()
  for (let key in formAnnouncement) {
    fd.append(key, formAnnouncement[key])
  }
  console.log(formAnnouncement)
  if (formAnnouncement.announcementId) {
    //编辑题目请求
    await editAnnouncementService(fd)
    ElMessage.success('编辑成功')
    emit('success', 'edit')
  } else {
    await addAnnouncementService(fd)
    ElMessage.success('添加成功')
    emit('success', 'add')
  }
  visibleDrawer.value = false
}


</script>

<style lang="scss">
.announcement-button {
  width: 200px;
}
/* 容器样式修复 */
.quill-container {
  width: 100%;
  margin: 0 auto;
}

/* 样式穿透 */
:deep(.ql-toolbar.ql-snow) {
  display: block !important;  /* 强制块级布局 */
  float: none !important;      /* 清除浮动 */
  width: 100% !important;      /* 全宽显示 */
  border-radius: 4px 4px 0 0;
}

:deep(.ql-container.ql-snow) {
  display: block !important;
  clear: both !important;      /* 清除浮动影响 */
  border-radius: 0 0 4px 4px;
}
</style>